<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">

        <div slot="common-body">
            <el-table :data="tableData" border style="width: 100%" size="mini">
                <el-table-column prop="order_code" label="订单号">
                </el-table-column>
                <el-table-column prop="subitem_code" label="子订单号">
                </el-table-column>
                <el-table-column prop="proxy_code" label="代理人编号">
                </el-table-column>
                <el-table-column prop="shares_name" label="股票名称">
                </el-table-column>
                <el-table-column prop="shares_code" label="股票代码">
                </el-table-column>
                <el-table-column prop="principal" label="名义本金(万元)">
                </el-table-column>
                <el-table-column prop="trans_date" label="交易日">
                </el-table-column>
                <el-table-column prop="fact_price" label="权利价格">
                </el-table-column>
                <el-table-column prop="pay_ratio" label="成交权利金比例">
                </el-table-column>
                <el-table-column prop="pay_money" label="支付权利金">
                </el-table-column>
                <el-table-column prop="" label="行权状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.exercise_state==0">未行权</span>
                        <span v-else-if="scope.row.exercise_state==1">行权处理中</span>
                        <span v-else-if="scope.row.exercise_state==2">已行权</span>
                    </template>
                </el-table-column>
                <el-table-column prop="exercise_price" label="申请行权价格">
                </el-table-column>
                <el-table-column prop="" label="实际行权时间">
                    <template slot-scope="scope">
                        {{scope.row.exercise_time==0?'-':scope.row.exercise_time}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="行权价格">
                    <template slot-scope="scope">
                        {{scope.row.fact_exercise_price==0?'-':scope.row.fact_exercise_price}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="结算金额">
                    <template slot-scope="scope">
                        {{scope.row.settle_money==0?'-':scope.row.settle_money}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="实际盈亏">
                    <template slot-scope="scope">
                        {{scope.row.fact_profit==0?'-':scope.row.fact_profit}}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="applyEnter(scope.row,1)">行权录入</el-button>
                        <el-button type="text" size="mini" @click="applyEnter(scope.row,2)">驳回</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-dialog title="行权录入" :visible.sync="dialogMarkVisible">
                <el-form ref="applyForm" :model="applyForm" label-width="100px">
                    <el-form-item label="行权股票">
                        <el-input v-model="applyForm.shares_name" disabled="disabled" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="权利价格">
                        <el-input v-model="applyForm.fact_price" disabled="disabled" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="支付权利金">
                        <el-input v-model="applyForm.pay_money" disabled="disabled" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="行权价格" v-if="isSHow==false">
                        <el-input v-model="applyForm.price" :disabled="isSHow" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="申请行权价格" v-if="isSHow">
                        <el-input v-model="applyForm.exercise_price" :disabled="isSHow" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" v-if="isSHow">
                        <el-input v-model="applyForm.desc" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogMarkVisible = false">取 消</el-button>
                    <el-button type="primary" @click="markDownService">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div slot="common-page">
            <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
        </div>
    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat } from '@/assets/utils.js'
export default {
    props: ['breadcrumb'],
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            dialogMarkVisible: false,
            tableData: [{}],
            isSHow: false,
            disabled: false,
            applyForm: {}
        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
        this.queryTableList();
    },
    methods: {
        //查询列表
        async  queryTableList(page = 1) {

            let res = await service.haiheiQueryExerciseInfoByPageServer()
            if (res.success) {
                let result = res.result.pageList
                this.tableData = result;
                this.total = res.result.nums;
                this.page = res.result.page;
                this.pageSize = res.result.pageSize;
            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                });
            }
        },


        applyEnter(item, type) {
            this.applyForm = Object.assign({}, item)
            this.dialogMarkVisible = true;
            if (type == 1) {
                this.applyForm.desc = '';
                this.isSHow = false
            } else {
                this.isSHow = true
                this.applyForm.price = '';
            }
        },

        async markDownService() {
            let res = null;
            if (this.isSHow) {
                res = await service.haiheiRefuseExerciseServer({
                    orderSubCode: this.applyForm.subitem_code,
                    desc: this.applyForm.desc
                })
            } else {
                res = await service.haiheiExerciseOperationServer({
                    orderSubCode: this.applyForm.subitem_code,
                    price: this.applyForm.price
                })
            }

            if (res.success) {
                this.$message({
                    type: "success",
                    message: '操作成功'
                });
                this.dialogMarkVisible = false;
            }else{
                this.$message({
                    type: "success",
                    message: res.msg
                });
            }

        },




        //分页
        pageFunNumber(page) {
            this.queryTableList(page);
        },
        //导出
        exportExcelChild() {

        },
        //查询
        searchFromChild() { },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    components: {
        pagePagination,
        commonContainer
    }
}
</script>

<style scoped>
</style>